<template>
    <div>

        <app-search>
            <el-form label-width="80px">
                <el-form-item label="类型：">
                    {{cdType.type}}
                </el-form-item>

                <el-form-item label="描述：">
                    {{cdType.description}}
                </el-form-item>

                <el-form-item>
                    <el-button type="edit" icon="el-icon-plus" @click="addCodeItem()">
                        添加代码项
                    </el-button>

                    <el-button type="danger" icon="el-icon-delete" @click="deleteSelected()">
                        删除代码项
                    </el-button>

                    <el-button type="primary" icon="el-icon-back" @click="cancel()">
                        返回
                    </el-button>
                </el-form-item>
            </el-form>
        </app-search>


        <el-table v-loading="tableData.loading" :data="codeItems"
                  @selection-change="handleSelectionChange" stripe border class="fullWidth">
            <el-table-column type="selection" min-width="55"
                class-name="centerCell"></el-table-column>
            <el-table-column label="数据值" prop="code" min-width="25%"
                class-name="centerCell"></el-table-column>
            <el-table-column label="描述" prop="description" min-width="30%"
                class-name="centerCell"></el-table-column>
            <el-table-column label="排序" prop="sort" min-width="25%"
                class-name="centerCell"></el-table-column>

            <el-table-column label="操作" class-name="centerCell">
                <template slot-scope="scope">
                    <el-button type="edit" size="small" icon="el-icon-edit"
                               @click="showEditCdDialog(scope.row)" >编辑</el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete"
                            @click="deleteCdRow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="编辑代码项" :visible.sync="showEditCd" center>
            <el-form :model="editCd"  :label-position="labelPosition" :label-width="formLabelWidth">
                <el-form-item label="数据值" >
                    <el-input v-model="editCd.code"></el-input>
                </el-form-item>
                <el-form-item label="描述" >
                    <el-input v-model="editCd.description"></el-input>
                </el-form-item>
                <el-form-item label="排序" >
                    <el-input-number v-model="editCd.sort"></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showEditCd = false">取 消</el-button>
                <el-button type="primary" @click="saveCdItem()">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
    name: "DictEdit",
    data() {
        return {
            cdType: {},
            tableData: {
                loading: true,
                body: []
            },
            showEditCd: false,
            formLabelWidth: '90px',
            cdItem:{},
            labelPosition: this.$store.labelPosition,
            selectedItems: [],
            isEdit: false,
            editCd: {}
        }
    },
    mounted() {
        this.getCodeType()
    },
    computed: {
        ...mapState({
            dictId: state => state.basiccfg.dictId,
            codeItems: state => state.basiccfg.codeItems
        }),
    },
    methods: {
        ...mapActions({
            hideEditDict: 'basiccfg/hideEditDict',

        }),
        // 获取table数据
        async getCodeType() {
            console.log("getCodeType()");
            let res = await this.$axios.get(`/sys/cdtype/findById/${this.dictId}`);

            console.log("返回代码类型及代码项：", res);
            this.cdType = res.result;
            this.tableData.loading = false;
            this.$store.dispatch('basiccfg/setCodeItems', res.result.items)
        },

        addCodeItem() {
            this.editCd = {};
            this.editCd.typeId = this.cdType.id;
            this.showEditCd = true;
            this.isEdit = false;
        },

        showEditCdDialog(cdItem) {
            this.cdItem = cdItem;
            // 需要另外一个变量，因为如果不这样的话，在弹出的编辑框里编辑了某个属性的话，
            // 其实改变的是本身，如果点取消的话，虽然没有存到数据库，但是列表会显示更改后的值
            this.editCd = Object.assign({}, cdItem);
            this.showEditCd = true;
            this.isEdit = true;
        },

        async saveCdItem(){
            if(this.isEdit){
                await this.$axios.post('/sys/cd/save', this.editCd);
                Object.assign(this.cdItem, this.editCd);

            }else{
                this.editCd.typeId = this.dictId;
                let res = await this.$axios.post('/sys/cd/add', this.editCd);
                this.editCd.id = res.result;
                this.$store.dispatch('basiccfg/addCodeItem', this.editCd);
            }
            this.showEditCd = false;
        },

        handleSelectionChange(val) {
            console.log("val: ", val); // val 中是所有选中的元素的值
            this.selectedItems = val;
        },

        async deleteSelected() {
            let deletedIds = "";
            this.selectedItems.forEach( item => {
                deletedIds += item.id + ";";
            });
            console.log("deleted cd items: ", deletedIds);
            await this.$axios.post("/sys/cd/batchRemove", {ids: deletedIds});

            this.selectedItems.forEach(row => {
                this.$store.dispatch('basiccfg/deleteCodeItem', row.id);
            });
            this.selectedItems = []
        },

        cancel(){
            this.hideEditDict();
        },

        async deleteCdRow(row){
            await this.$axios.post("/sys/cd/batchRemove", {ids: row.id});
            this.$store.dispatch('basiccfg/deleteCodeItem', row.id);
        },


    }
}
</script>

